import React, {Component} from 'react'
import {View, Text, Image, Modal, TouchableOpacity, ImageBackground} from 'react-native'
// import ImageViewer from 'react-native-image-zoom-viewer'
import Lightbox from 'react-native-lightbox';
import FastImage from 'react-native-fast-image'


import styles from '../../config/styles'

class ImageAttachment extends Component {
    static defaultProps = {
        urls: [],
        index: 0,
        url: '',
        compressUrl: ''
    }

    constructor (props) {
        super(props)
        this.state = {
            modalVisible: false        
        }
    }

    cancelTemplate = () => {
        return (
            <TouchableOpacity
                style={{height: 100}}
                onPress={() => {this.setState({modalVisible: false})}}
            />  
        )
            
    }

    modalTemplate = () => {
        return (
            <Modal visible={this.state.modalVisible} transparent={true} onRequestClose={() => {}}>
                <ImageViewer
                    renderHeader={this.cancelTemplate}
                    renderFooter={this.cancelTemplate}
                    imageUrls={this._urls()}
                    index={this.props.index}
                /> 
            </Modal>
        )
    }

    _url = () => {
        if (this.props.attachment.url.match(/^https:\/\/*/)) {
            return this.props.attachment.url
        } else {
            return App.host + '/api' + this.props.attachment.url
        }
    }

    _urls = () => {
        return this.props.urls || [this.props.attachment.awsPath]
    }

    render () {
        const attachment = this.props.attachment
        // const _url = this._url()
        const _url = this._url()
        return(
            <View style={{margin: 5,height: 55, width: 55, backgroundColor: '#F0F0F0'}}>
                <Lightbox 
                    renderContent={() => {return <Image
                        style={{  flex: 1}}
                        source={{ uri: this._url() }}
                    />}}
                >
                    <FastImage
                        style={[styles.attachment_view]}
                        source={{ uri: _url,  priority: FastImage.priority.normal }}
                    />
                </Lightbox>
            </View>
            
        )
    }
}

export default ImageAttachment